<template>
    <div class="paper-search">
        <search :searchKey.sync="searchKey" 
                enterButton="搜索论文"
                placeholder="输入你感兴趣的论文名或关键字"
                @search="search"/>
        <div class="content-left">
            <div class="title">
                <Icon type="md-apps" size="32" color="#999"></Icon>
                <h3 style="margin-left:10px;font-size:18px">
                    期刊论文 
                    <span style="color:#888;font-weight:normal;font-size:15px;margin-left:20px" v-if="paper_name"> > {{paper_name}}</span>
                    <Select class="pc" v-model="year" style="width:120px;margin-left:20px" placeholder="筛选年份" @on-change="changeYear">
                        <Option v-for="item in yearList" :value="item" :key="item">{{ item }}</Option>
                    </Select>
                    <Select class="pc" v-model="type" style="width:120px;margin-left:20px" placeholder="筛选论文类型" @on-change="changeType">
                        <Option v-for="item in typeList" :value="item" :key="item">{{ item }}</Option>
                    </Select>
                </h3>
            </div>
            <div style="text-align:left;margin-top:10px" class="mobile">
                <Select v-model="year" style="width:120px;margin-right:20px" placeholder="筛选年份" @on-change="changeYear">
                    <Option v-for="item in yearList" :value="item" :key="item">{{ item }}</Option>
                </Select>
                <Select v-model="type" style="width:120px;" placeholder="筛选论文类型" @on-change="changeType">
                    <Option v-for="item in typeList" :value="item" :key="item">{{ item }}</Option>
                </Select>
            </div>
            <Divider style="margin-top:15px;background-color:#ccc"  />
            
            <!-- 暂无结果 -->
            <div v-if="!totalPages&&loaded" style="text-align:center;margin-bottom:200px" class="animated fadeInUp">
                <img src="../assets/noresult.svg" alt="" width="200px" height="175px">
                <br>
                <span style="margin-right:0;margin-top:20px;font-size:18px">暂时没有结果，换一些关键词试试吧~</span>
            </div>

            <!-- 骨架屏 -->
            <el-skeleton animated :loading="!loaded">
                <template slot="template">
                <div class="paper-list"  v-for="(item,index) in 7" :key="index">
                    <div>
                        <el-skeleton-item variant="text" style="width:150px;height:30px"  />
                        <el-skeleton-item variant="text" />
                        <el-skeleton-item variant="text" style="height:100px" />
                        <el-skeleton-item variant="text" />
                        <el-skeleton-item variant="text" />
                    </div>
                    <Divider style="margin-top:15px;background-color:#ccc"  />
                </div>
                </template>
            </el-skeleton>
            
            <div v-if="!loading&&loaded">
                <div class="paper-list" v-for="item in pageInfo" :key="item.id" v-if="item.paper_title">
                    <div class="paper-title">
                        <Icon type="ios-paper" />
                        <span style="margin-left:5px" v-html="highlightHTML(item.paper_title||item.doc_title,searchKey)"></span>
                    </div>
                    <div class="paper-info">
                        <span><Icon type="md-contact" /> {{item.first_author||item.authors}}；</span>
                        <span v-if="item.other_authors"><span v-for="(other,index) in item.other_authors.split(/[;；,，]/)" :key="index" ><Icon type="md-contact" v-if="other&&other!='无'" /> {{(other&&other!="无")?`${other}；`:''}}</span></span>
                        <span><Icon type="md-stopwatch" /> {{item.publish_time||item.year_published}}</span>
                    </div>
                    <div class="paper-intro" v-html="highlightHTML(item.abstract,searchKey)"></div>
                    <div class="paper-keyword" v-if="item.keyword">
                        <span v-for="(keyword,index) in item.keyword.split(/[;；,，]/)" :key="index"><Button v-if="keyword.trim()" v-html="highlightHTML(keyword,searchKey)"></Button></span>
                    </div>
                    <div class="paper-conference"><Icon type="logo-buffer" /> {{item.retrieval||type}}  <span class="show-graph" @click="initGraph(item)"><Icon type="md-log-in" size="16" /> 图谱可视化</span></div>
                    <Divider style="margin-top:15px;background-color:#ccc"  />
                </div>
                <div v-else style="text-align:center;margin-bottom:50px" class="animated fadeInUp">
                    <img src="../assets/noresult.svg" alt="" width="200px" height="175px">
                    <br>
                    <span style="margin-right:0;margin-top:20px;font-size:18px">此项数据缺失了，试试其他页码吧~</span>
                </div>
                <Page v-if="totalPages" :total="totalPages" class="pages" :current="pageNumber" :page-size="6" @on-change="getPageInfo" style="background:white" />
            </div>
        </div> 
        <!-- 图谱框 -->
        <Modal
            v-model="showGraphModel"
            title="论文图谱可视化"
            >
            <div class="chart-graph"></div>
        </Modal>
    </div>
</template>

<script>
import utils from '../utils/utils'
import search from '../components/topSearch.vue'
import PaperService from "@/service/papers"
export default {
    components:{
        search
    },
    data(){
        return{
            pageInfo:[],
            loading:true,
            pageNumber:1,
            totalPages:0,
            searchKey:'',
            paper_name:'',
            year:null,
            yearList:[],
            loaded:false,
            typeList:[],
            type:null,
            showGraphModel:false,
            types: {
                'CSSCI期刊':"PAPER_CSSCI",
                'SSCI期刊论文':"PAPER_SCI",
                'NSC教育类论文':"PAPER_NSC",
                '社会学与教育交叉研究论文':"PAPER_EDU_SOC",
                '心理学与教育交叉研究论文':"PAPER_PSY_EDU",
                '信息科学与教育交叉研究论文':"PAPER_IT_EDU",
                '脑科学与教育交叉论文':"PAPER_BRAIN_EDU",
                'EDM会议论文':"PAPER_CONF_EDM",
                'LAK会议论文':"PAPER_CONF_LAK",
                'ITS会议论文':"PAPER_CONF_ITS",
                'AIED会议论文':"PAPER_CONF_AIED"
            },
        }
    },
    computed:{
        filter_paramas(){
            let arr = [];
            if(this.searchKey){
                arr.push(['paper_title',6,this.searchKey]);
                arr.push(['lun_wen_biao_ti',6,this.searchKey]);
            }
            if(this.year!='全部年份'&&this.year){
                arr.push(['publish_time',0,this.year])
            }
            if(this.type!='全部论文类型'&&this.type){
                arr.push(['type',0,this.types[this.type]])
            }
            return arr;
        }
    },
    mounted(){
        this.$route.params.searchKey&&(this.searchKey=this.$route.params.searchKey)&&(this.paper_name=this.$route.params.searchKey);

        this.$Loading.finish();
        this.getData();
        this.getYears();
        this.getTypes();
    },
    methods:{
        getData(){
            this.loaded = false;
            PaperService.getDatas({
                pageSize:6,
                pageNumber:this.pageNumber,
                filter:this.filter_paramas,
                order:[["publish_time", 1]]
            }, '1074').then((res) => {
                console.log(res)
                this.pageInfo = res.data;
                setTimeout(() => {
                    this.loaded = true; 
                    this.totalPages = res.total;
                    this.loading = false;
                }, 500);
            });  
        },
        search(){
            this.pageNumber = 1;
            document.body.scrollIntoView(true);
            this.paper_name = this.searchKey;
            this.getData();
        },
        getPageInfo(currentIndex){
            this.pageNumber = currentIndex;
            this.getData();
            document.body.scrollIntoView(true);
        },
        //搜索结果高亮
        highlightHTML(html,searchKey){
            return utils.highlightHTML(html,searchKey)
        },
        //获取筛选年份数据
        getYears() {
           this.pageNumber = 1;
           PaperService.getDatas({
                columns:["distinct:publish_time"],
                order:[["publish_time", 1]]
            }, '1074').then((res) => {
                this.yearList = res.data.map(item=>{
                    return item[`_distinct_publish_time`]
                });
                this.yearList.shift();
                this.yearList.unshift('全部年份');
            });
        },
        //切换年份数据
        changeYear(){
            this.getData();
        },
        getTypes(){
            for(let key in this.types){
                this.typeList.push(key);
            }
            this.typeList.unshift('全部论文类型');
        },
        changeType(value){
            this.pageNumber = 1;
            this.getData();
        },
        //论文图谱可视化
        initGraph(item){
            this.graph_chart = null;
            this.graph_chart = echarts.init(document.querySelector('.chart-graph'));
            this.graph_chart.showLoading({
                text:'正在加载...'
            });
            this.showGraphModel = true;
            let categories = [{
                    name: "论文名"
                }, {
                    name: "作者"
                }, {
                    name: "关键词"
                },{
                    name: "被引数"
                },{
                    name: "发表时间"
                },{
                    name: "检索情况"
                },{
                    name: "摘要"
            }];
            let graph = {
                tooltip: {
                    extraCssText:'max-width:420px; white-space:pre-wrap',
                    formatter: function(params) {
                        let overflow = '';
                        if(params.name.length>100) overflow = ' .....'; 
                        return `<div style="">${params.marker}${params.data.category}:${params.name.slice(0,200)}${overflow}<div>`;
                    }
                },
                animationDurationUpdate: 500,
                animationEasingUpdate: "quinticInOut",
                legend: [{
                    orient: 'vertical',
                    left:30,
                    top:'center',
                    textStyle:{
                        color:'#888',
                    },
                    data: categories.map(function(a) {
                        return a.name;
                    })
                }],
                series: [{
                    type: "graph",
                    layout: "force",
                    roam: true,
                    hoverAnimation: true,
                    focusNodeAdjacency: true,
                    symbolSize: 33,
                        force: {
                        repulsion:300
                    },
                    itemStyle: {
                        normal: {
                            borderColor: "#fff",
                            borderWidth: 1,
                            shadowBlur: 10,
                            shadowColor: "rgba(0, 0, 0, 0.3)"
                        }
                    },
                    label:{
                        formatter: function(val) {
                            if(val.data.name.length>=100){
                                return val.data.name.slice(0,20) + ".....";
                            }
                            if(val.data.name.length>=40){
                                return val.data.name.slice(0,val.data.name.length/2) + "\n" + val.data.name.slice(val.data.name.length/2);
                            }
                            return val.data.name;
                        },
                    },
                    lineStyle: {
                        width:1,
                        curveness: 0.3,
                        opacity: 0.8
                    },
                    emphasis: {
                        itemStyle: {
                            borderWidth:1
                        },
                        lineStyle: {
                            color: 'gray',
                            width: 6,
                        }
                    },
                    data: [{
                        name: item.paper_title||item.doc_title,
                        category: '论文名',
                        symbolSize: 90,
                        label: {
                            show: true,
                        }, 
                        itemStyle: {
                            borderWidth:3
                        }, 
                        emphasis: {
                        itemStyle: {
                            borderWidth:3
                        },

                    },
                    }, {
                        name: "作者",
                        category: '作者', 
                        symbolSize: 60,
                        label: {
                            show: true
                        }  
                    },{
                        name: "关键词",
                        category: '关键词', 
                        symbolSize: 60,
                        label: {
                            show: true
                        }  
                    },{
                        name: "被引数",
                        category: '被引数', 
                        symbolSize: 60,
                        label: {
                            show: true
                        }  
                    },{
                        name: "发表时间",
                        category: '发表时间', 
                        symbolSize: 60,
                        label: {
                            show: true
                        }  
                    },{
                        name: "检索情况",
                        category: '检索情况', 
                        symbolSize: 60,
                        label: {
                            show: true
                        }  
                    },{
                        name: "摘要",
                        category: '摘要', 
                        symbolSize: 60,
                        label: {
                            show: true
                        }  
                    },{
                        name: item.cited_count||'暂无数据',
                        category: '被引数', 
                        symbolSize: 40,
                        label: {
                            show: true
                        }  
                    },{
                        name: item.publish_time||item.year_published||'暂无数据',
                        category: '发表时间', 
                        symbolSize: 40,
                        label: {
                            show: true
                        }  
                    },{
                        name: item.retrieval||'暂无数据',
                        category: '检索情况', 
                        symbolSize: 40,
                        label: {
                            show: true
                        }  
                    },{
                        name: item.abstract,
                        category: '摘要', 
                        symbolSize: 40,
                        label: {
                            show: true
                        }  
                    }],
                    links: [{
                        source: "作者",
                        target: item.paper_title||item.doc_title,
                        value: "",
                    },{
                        source: "关键词",
                        target: item.paper_title||item.doc_title,
                        value: "",
                    },{
                        source: "被引数",
                        target: item.paper_title||item.doc_title,
                        value: "",
                    },{
                        source: "发表时间",
                        target: item.paper_title||item.doc_title,
                        value: "",
                    },{
                        source: "检索情况",
                        target: item.paper_title||item.doc_title,
                        value: "",
                    },{
                        source: "摘要",
                        target: item.paper_title||item.doc_title,
                        value: "",
                    },{
                        source: item.cited_count||'暂无数据',
                        target: "被引数",
                        value: "",
                    },{
                        source: item.publish_time||item.year_published||'暂无数据',
                        target: "发表时间",
                        value: "",
                    },{
                        source: item.retrieval||'暂无数据',
                        target: "检索情况",
                        value: "",
                    },{
                        source: item.abstract,
                        target: "摘要",
                        value: "",
                    }],
                    categories: categories
                }]
            };

            //push keyword
            if(item.keyword){
                for(let keyword of item.keyword.split(/[;；,，]/)){
                    if(!keyword) continue;
                    graph.series[0].data.push({
                        name: keyword,
                        category: '关键词', 
                        symbolSize: 40,
                        label: {
                            show: true
                        }  
                    });
                    graph.series[0].links.push({
                        source: keyword,
                        target: "关键词",
                        value: "",
                    });
                }
            }

            //push 作者
            graph.series[0].data.push({
                name: item.first_author.replace(';',''),
                category: '作者', 
                symbolSize: 40,
                label: {
                    show: true
                }  
            });
            graph.series[0].links.push({
                source: item.first_author.replace(';',''),
                target: "作者",
                value: "",
            });
            if(item.other_authors){
                for(let author of item.other_authors.split(/[;；,，]/)){
                    if(!author) break;
                    graph.series[0].data.push({
                        name: author,
                        category: '作者', 
                        symbolSize: 40,
                        label: {
                            show: true
                        }  
                    });
                    graph.series[0].links.push({
                        source: author,
                        target: "作者",
                        value: "",
                    });
                }
            }
                            
            

            this.graph_chart.hideLoading();
            this.graph_chart.setOption(graph);

            window.addEventListener('resize',()=>{
                this.graph_chart.resize();
            })
        },
    }
}
</script>

<style lang="scss" scoped>
/deep/ .ivu-select-placeholder,
/deep/ .ivu-select-item,
/deep/ .ivu-select-selected-value{
    font-weight: normal;
}
/deep/ .search-div{
    padding-bottom: 100px !important;
}
/deep/ .ivu-modal{
    width: 60vw !important;
    top:50px;
    position: relative;
    overflow: hidden !important;
}
/deep/ .ivu-modal .chart-graph{
    height: 65vh;
    width: 80vw;
    padding-right: 30px;
}
.mobile{
    display: none;
}
.content-left{
    width: 80%;
    margin-left: 10%;
    .title {
        margin-top: 40px;
        display: flex;
        flex-direction: row;
        align-items: center;
        text-align: left;
        color: #666;
        white-space: nowrap;
        overflow: hidden;
        margin-right: 30px;
        text-overflow: ellipsis;
        h3{
            display: inline-block;
        }
        .draw{
            position: absolute;
            right: 20px;
            display: none;
            span{
                display: inline-block;
                vertical-align: middle;
                font-size: 15px;
            }
        }
    }
    .paper-list{
        margin-bottom: 20px;
        >div{
            text-align: left;
            color: #888;
            margin-top: 5px;
            margin-bottom: 5px;
        }
        .paper-title{
            font-size: 20px;
            font-weight: bold;
            color: #4eadca;
            cursor: pointer;
        }
        .paper-info{
            color: #888;
            font-weight: bold;
        }
        .paper-intro{
            font-size: 13px;
        }
        .paper-keyword{
            button{
                padding: 5px;
                font-size: 12px;
                color: #999;
                margin-right: 5px;
                margin-top: 5px;
            }
        }
        .paper-conference{
            color: orange;
            margin-top: 15px;
            cursor: pointer;
            .show-graph{
                float:right;
                vertical-align: bottom;
                color:var(--single-color);
                margin-right: 15px;
                font-size: 14px;
                margin-top: 3px;
            }
        }
    }
}
@media (max-width:1060px) {
    .search-div{
        padding-bottom: 80px !important;
    }
    .show-graph{
        display: none !important;
    }
    .pc{
        display: none !important;
    }
    .mobile{
        display: block;
    }
}
</style>